import type { PropType } from "vue";

export type Theme = "vs" | "vs-dark" | "hc-black" | "hc-light";
export type FoldingStrategy = "auto" | "indentation";
export type RenderLineHighlight = "all" | "line" | "none" | "gutter";
export type Options = Partial<{
  automaticLayout: boolean;
  foldingStrategy: FoldingStrategy;
  renderLineHighlight: RenderLineHighlight;
  selectOnLineNumbers: boolean;
  tabSize: number;
  minimap: {
    enabled: boolean;
  };
  readOnly: boolean;
  fontSize: number;
  scrollBeyondLastLine: boolean;
  overviewRulerBorder: boolean;
}>;

export const editorProps = {
  modelValue: {
    type: String as PropType<string>,
    default: null
  },
  width: {
    type: [String, Number] as PropType<string | number>,
    default: "100%"
  },
  height: {
    type: [String, Number] as PropType<string | number>,
    default: "100%"
  },
  language: {
    type: String as PropType<string>,
    default: "typescript"
  },
  theme: {
    type: String as PropType<Theme>,
    validator(value: string): boolean {
      return ["vs", "vs-dark", "hc-black", "hc-light"].includes(value);
    },
    default: "vs-dark"
  },
  options: {
    type: Object as PropType<Options>,
    default: () => {
      return {
        automaticLayout: true, // 自适应布局
        foldingStrategy: "indentation", // 折叠方式  auto | indentation
        renderLineHighlight: "all", // 行亮
        selectOnLineNumbers: true, // 显示行号
        tabSize: 2, // tab 缩进长度
        minimap: {
          enabled: true // 关闭小地图
        },
        readOnly: false, // 只读
        fontSize: 16, // 字体大小
        scrollBeyondLastLine: false, // 取消代码后面一大段空白
        overviewRulerBorder: false // 不要滚动条的边框
      };
    }
  }
};
